<template>
  <div class="screen-container" :style="containerStyle">
    <header class="screen-header">
      <div>
        <img :src="headerSrc" alt="" />
      </div>
      <span class="logo">
        <img :src="logoSrc" alt="" />
      </span>
      <span class="title">电商平台数据大屏实时监控系统</span>
      <div class="title-right">
        <img :src="themeSrc" class="qiehuan" @click="handleChangeTheme" />
        <span class="datetime">{{ time }}</span>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top" :class="[fullScreenStatus.trend ? 'fullscreen' : '']">
          <!-- 销量趋势图表 -->
          <Trend ref="trend" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('trend')"
              :class="['iconfont', fullScreenStatus.trend ? 'icon-compress-alt' : 'icon-expand-alt']"
            ></span>
          </div>
        </div>
        <div id="left-bottom" :class="[fullScreenStatus.seller ? 'fullscreen' : '']">
          <!-- 商家销售金额图表 -->
          <Seller ref="seller" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('seller')"
              :class="['iconfont', fullScreenStatus.seller ? 'icon-compress-alt' : 'icon-expand-alt']"
            ></span>
          </div>
        </div>
      </section>
      <section class="screen-middle">
        <div id="middle-top" :class="[fullScreenStatus.map ? 'fullscreen' : '']">
          <!-- 商家分布图表 -->
          <singleMap ref="map" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('map')"
              :class="['iconfont', fullScreenStatus.map ? 'icon-compress-alt' : 'icon-expand-alt']"
            ></span>
          </div>
        </div>
        <div id="middle-bottom" :class="[fullScreenStatus.rank ? 'fullscreen' : '']">
          <!-- 地区销量排行图表 -->
          <Rank ref="rank" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('rank')"
              :class="['iconfont', fullScreenStatus.rank ? 'icon-compress-alt' : 'icon-expand-alt']"
            ></span>
          </div>
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top" :class="[fullScreenStatus.hot ? 'fullscreen' : '']">
          <!-- 热销商品占比图表 -->
          <Hot ref="hot" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('hot')"
              :class="['iconfont', fullScreenStatus.hot ? 'icon-compress-alt' : 'icon-expand-alt']"
            ></span>
          </div>
        </div>
        <div id="right-bottom" :class="[fullScreenStatus.stock ? 'fullscreen' : '']">
          <!-- 库存销量分析图表 -->
          <Stock ref="stock" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('stock')"
              :class="['iconfont', fullScreenStatus.stock ? 'icon-compress-alt' : 'icon-expand-alt']"
            ></span>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, onMounted, onUnmounted, nextTick, computed } from "vue";
import dayjs from "dayjs";
import Hot from "./components/Hot.vue";
import singleMap from "./components/Map.vue";
import Rank from "./components/Rank.vue";
import Seller from "./components/Seller.vue";
import Stock from "./components/Stock.vue";
import Trend from "./components/Trend.vue";
import { useThemeStore } from "@/store/modules/theme";
import { getThemeValue } from "@/utils/theme_utils.ts";

const themeStore = useThemeStore();

const { proxy } = getCurrentInstance()!;
// 定义每一个图表的全屏状态
const fullScreenStatus = reactive({
  trend: false,
  seller: false,
  map: false,
  rank: false,
  hot: false,
  stock: false
});

const trend = ref(null);
const map = ref(null);
const hot = ref(null);
const seller = ref(null);
const stock = ref(null);
const rank = ref(null);
const time = ref("");

let timer: ReturnType<typeof setInterval> | null = null;
const updateTime = () => {
  time.value = dayjs().format("YYYY-MM-DD dddd HH:mm:ss");
};
const changeSize = (chartName: string) => {
  // 将数据发送给服务端
  const targetValue = !fullScreenStatus[chartName];

  proxy.$socket.send({
    action: "fullScreen",
    socketType: "fullScreen",
    chartName: chartName,
    value: targetValue
  });
};

const recvData = async (data: { chartName: string; value: boolean }) => {
  const { chartName, value } = data;

  const chartRefs = {
    trend: trend.value,
    map: map.value,
    hot: hot.value,
    seller: seller.value,
    stock: stock.value,
    rank: rank.value
  };

  // 更新全屏状态
  fullScreenStatus[chartName] = value;
  await nextTick();
  chartRefs[chartName as keyof typeof chartRefs]?.screenAdapter?.();
};
const logoSrc = computed(() => {
  return "/static/img/" + getThemeValue(themeStore.theme).logoSrc;
});

const headerSrc = computed(() => {
  return "/static/img/" + getThemeValue(themeStore.theme).headerBorderSrc;
});

const themeSrc = computed(() => {
  return "/static/img/" + getThemeValue(themeStore.theme).themeSrc;
});

const containerStyle = computed(() => {
  return {
    backgroundColor: getThemeValue(themeStore.theme).backgroundColor,
    color: getThemeValue(themeStore.theme).titleColor
  };
});

const handleChangeTheme = () => {
  proxy.$socket.send({
    action: "themeChange",
    socketType: "themeChange",
    chartName: "",
    value: ""
  });
};

const recvThemeChange = () => {
  themeStore.changeTheme();
};

onMounted(() => {
  // 初始化时间
  updateTime();
  // 创建定时器每秒更新
  timer = setInterval(updateTime, 1000);
  // 注册回调（使用可选链操作符）
  proxy.$socket.registerCallBack("fullScreen", recvData);
  proxy.$socket.registerCallBack("themeChange", recvThemeChange);
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
  // 注销回调（使用可选链操作符）
  proxy.$socket.unRegisterCallBack("fullScreen");
  proxy.$socket.unRegisterCallBack("themeChange");
});
</script>

<style scoped lang="scss">
// 全屏样式的定义
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 9999;
}

.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #2e2e2f;
  color: #fff;
  box-sizing: border-box;
}
.screen-header {
  width: 100%;
  font-size: 20px;
  position: relative;
  > div {
    img {
      width: 100%;
    }
  }
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }
  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }
  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }
  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }
  .logo {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-80%);
    img {
      height: 35px;
      width: 154px;
    }
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 10px;
  .screen-left {
    height: 100%;
    width: 27.6%;
    #left-top {
      height: 53%;
      position: relative;
    }
    #left-bottom {
      height: 31%;
      margin-top: 25px;
      position: relative;
    }
  }
  .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    #middle-top {
      width: 100%;
      height: 56%;
      position: relative;
    }
    #middle-bottom {
      margin-top: 25px;
      width: 100%;
      height: 28%;
      position: relative;
    }
  }
  .screen-right {
    height: 100%;
    width: 27.6%;
    #right-top {
      height: 46%;
      position: relative;
    }
    #right-bottom {
      height: 38%;
      margin-top: 25px;
      position: relative;
    }
  }
}
.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
</style>
